<template>
	<!-- 动画时间尽量短，如果太长触发@animationfinish很慢:indicator-dots="true" -->
	<swiper @change="swiperChange" :current="current_item_index" :autoplay="false" :duration="400">
		<swiper-item v-for="(item, index) in arr_img.value" :key="item.id">
			<!-- <image :src="item.url" mode="aspectFill"></image> -->
			<!-- <image v-if="index < limit_control.right && index > limit_control.left" :src="item.url" mode="aspectFill"></image> -->
			<ImageLoading
				v-if="index < limit_control.right && index > limit_control.left"
				:src="item.url"
				mode="aspectFill"
			></ImageLoading>
		</swiper-item>
	</swiper>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { inject, nextTick, reactive, ref, watch } from 'vue'
import { get_day_choice } from '@/api'

const arr_img = reactive({ value: [] })
const current_item_index = inject('current_item_index')
const current_image_data = inject('current_image_data')
const limit_control = reactive({ left: 0, right: 0 })

const limit = 1

const api_get_day_choice = async function (daysAgo) {
	let res = await get_day_choice(daysAgo)
	res.data.forEach((item) => {
		// 更换为高清
		item.url = item.url.replace('wallpaper', 'wallpaper2')
	})
	arr_img.value = res.data
	current_image_data.value = res.data[current_item_index.value]
}

// 动态控制图片的显示
const swiperChange = (event) => {
	const differ = event.detail.current - current_item_index.value
	if (differ > 0) {
		if (limit_control.right < event.detail.current + limit) {
			limit_control.right += differ
		}
	} else {
		if (limit_control.left > event.detail.current - limit) {
			limit_control.left += differ
		}
	}
	current_item_index.value = event.detail.current
	current_image_data.value = arr_img.value[event.detail.current]
}

onLoad((obj) => {
	obj.index = Number(obj.index)
	obj.daysAgo = Number(obj.daysAgo)

	current_item_index.value = obj.index
	limit_control.right = obj.index + limit
	limit_control.left = obj.index - limit
	api_get_day_choice(obj.daysAgo)
})
</script>

<style scoped lang="scss">
swiper {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;

	swiper-item {
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
